<template>
	<navBar></navBar>
	<view class="Title">新用户注册</view>
	<view class="Wrapper">
		<view class="list">
			<input
				type="number"
				maxlength="11"
				class="Phone"
				placeholder="请输入注册手机号码"
				placeholder-class="place"
				v-model="Phone" />
		</view>
		<view class="list">
			<input
				type="number"
				maxlength="6"
				class="Inputtxt"
				placeholder="请输入验证码"
				placeholder-class="place"
				v-model="Code" />
			<view class="Code" @click="getCode">获取验证码</view>
		</view>
		<view class="list">
			<input
				:type="showPass ? 'text' : 'password'"
				maxlength="6"
				class="Inputtxt"
				placeholder="请设置6-20位登录密码"
				placeholder-class="place"
				v-model="Password" />
			<view
				class="iconfont islookPass color-999 size36"
				@click="toggleBoolean"
				:class="showPass ? 'icon-yanjing1' : 'icon-Close'"></view>
		</view>
		<view class="list">
			<input
				:type="showPass ? 'text' : 'password'"
				maxlength="6"
				class="Inputtxt"
				placeholder="请再次输入登录密码"
				placeholder-class="place"
				v-model="Password_config" />
			<view
				class="iconfont islookPass color-999 size36"
				@click="toggleBoolean"
				:class="showPass ? 'icon-yanjing1' : 'icon-Close'"></view>
		</view>
	</view>
	<view class="rows m-top20">
		<agreement></agreement>
	</view>

	<view class="continue" :class="{ active: meet }" @click="Continue">注 册</view>
	<view class="row j-centert havaAccount" @click.stop="Back()">已有账户，立即登录</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { Toast, Back, validatePhone, toUrl } from '@/utils/utils.js';
	import { useMainStore } from '@/stores/index';
	import { useToggle } from '@/utils/use.js';

	const mainStore = useMainStore();
	const [showPass, toggleBoolean] = useToggle(false);
	const Phone = ref('');
	const Code = ref('');
	const Password = ref('');
	const Password_config = ref('');

	const getCode = () => {
		if (!Phone.value) return Toast('请输入手机号');
		if (!validatePhone(Phone.value)) return Toast('手机号输入有误');
		console.log('ok');
	};

	const Continue = () => {
		if (!meet.value) return;
		console.log('ok');
	};
	const meet = computed(() => {
		return Phone.value && Code.value ? true : false;
	});
</script>

<style lang="scss" scoped>
	page {
		padding-top: 100rpx;
	}
	.Title {
		width: 650rpx;
		color: #333;
		font-size: 40rpx;
		font-weight: 600;
		margin: 30rpx auto 0;
	}
	.Wrapper {
		width: 650rpx;
		margin: 50rpx auto 0;
		.list {
			width: 100%;
			height: 100rpx;
			position: relative;
			margin-top: 50rpx;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			align-items: center;
			.islookPass {
				padding: 20rpx 0;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.Code {
				width: 170rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f0f0f0;
				color: #333;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 20rpx;
			}
		}
	}

	.continue {
		width: 650rpx;
		height: 80rpx;
		margin: 120rpx auto 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #add7ff;
		color: #fff;
		font-size: 34rpx;
		font-weight: 400;
	}
	.active {
		background-color: v-bind('mainStore.color') !important;
	}
	.havaAccount {
		color: #355c80;
		font-size: 26rpx;
	}
</style>
